<template>
	<view class="product" style="height: 100vh;">
		<view class="content">
			<image id="Shop_first_bg" :src="productDate.pic" mode="widthFix"></image>
			<view class="pieceContainer">
				<!-- 已售多少件 -->
				<!-- <PricePiece :Sold_out="productDate.each" /> -->
			</view>
			<view class="price_Taiwan">
				<view class="each">{{productDate.price}}<text>USDT/台</text></view>
				<button class="Buy_now" @click="ToDeails"></button>
			</view>
			<view class="Purchase_record">
				<!-- 数据实时更新 -->
				<!-- <ProScroll :listData="listData" /> -->
			</view>
		</view>
		<image class="fast_understand" src="../../static/images/Shop/Shop_Banner.png" mode="heightFix"></image>
	</view>
</template>

<script setup lang="ts">
	import PricePiece from '@/components/product/PricePiece/index.vue'
	import ProScroll from '@/components/product/ProScroll/index.vue'
	import { ref } from 'vue'
	import type { Product } from '@/types/product.js'
	import { useStore } from 'vuex'
	const { state } = useStore()
	console.log(state.product)
	// 商品数据
	const productDate : Product = state.product
	// 滚动的数据
	const listData = ref([
		{ title: '1344311322', content: '内容1' },
		{ title: '1344311322', content: '内容2' },
		{ title: '1344311322', content: '内容3' },
		{ title: '1344311322', content: '内容4' },
	])
	// 跳转详情页
	const ToDeails = () => {
		uni.navigateTo({
			url: '/subdue/ProductDetails/index',
		});
	}
</script>

<style lang='scss' scoped>
	html,
	body {
		background-color: #121316;
	}

	.content {
		position: relative;
		width: 100%;
		height: 920px;
		/* background-color: red; */

		#Shop_first_bg {
			width: 100%;
			display: block;
			margin: 0 auto;
		}

		.pieceContainer {
			position: absolute;
			top: 2%;
			left: 5%;
		}

		.price_Taiwan {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 300px;
			/* height: 150px; */
			/* background-color: red; */

			.each {
				text-align: center;
				font-size: 40px;
				color: #21F5EA;

				&>text {
					font-size: 24px;
				}
			}
		}

		.Purchase_record {
			position: absolute;
			top: 2%;
			right: 0;
			width: 300px;
			height: 200px;
			overflow: hidden;
			/* background-color: red; */
		}
	}

	.fast_understand {
		width: 90% !important;
		height: 240px;
		display: block;
		margin: 0 auto;
	}

	@property --direc {
		syntax: '<angle>';
		inherits: false;
		initial-value: 0deg;
	}

	.Buy_now {
		width: 160px;
		height: 64px;
		color: #fff;
		margin: 32px auto 80px auto;
		line-height: 64px;
		text-align: center;
		--direc: 0deg;
		background-image: linear-gradient(var(--direc), #99F5DA, #83AAE1, #6953E9, #A82DC0);
		animation: rotate 3s linear infinite;
		border-radius: 40px;
		/* border: 12px solid;
		border-image-source: url("../src/static/images/Shop/border.png");
		border-image-slice: 15;
		border-image-repeat: round;
		/* border-radius: 20px !important; */
		/* background-color: #000001; */
		/* padding: 0; */
		/* font-size: 24px; */
	}

	.Buy_now::before {
		content: '';
		position: absolute;
		inset: 4px;
		background-color: #000001;
		border-radius: inherit;
	}

	.Buy_now::after {
		content: '立即购买';
		font-size: 45px;
		position: absolute;
		inset: 4px;
		z-index: 1;
		margin-top: 10px;
		/* background-color: #000001; */
	}

	@keyframes rotate {
		to {
			--direc: 360deg
		}
	}
</style>